<template>
    <div class="input-panel">
        <!-- 只展示 mode 为 user_input 的输入项 -->
        <div v-for="input in userInputsToShow" :key="input.name">
            <component :is="getComponent(input.type)" v-model="input.value" :label="input.label"
                :desc="input.description" :rawdata="rawdata" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TextInput from './inputs/TextInput.vue';
import PointsInput from './inputs/PointsInput.vue';
import BBoxesInput from './inputs/BBoxesInput.vue';

// 存储组件对象的映射
const componentMap = {
    text: TextInput,
    points: PointsInput,
    bboxes: BBoxesInput,
};

// 根据类型获取对应的组件
const getComponent = (type) => {
    return componentMap[type] || TextInput; // 默认使用文本输入
};

// 存储所有输入配置
const inputs = ref([]);

// 存储需要在界面展示的 user_input 输入项
const userInputsToShow = ref([]);

// 设置输入参数
const rawdata = ref([]);

// 设置输入参数
const setInputs = (inputs_config, inputs_data) => {
    // console.log(`Set Inputs: `, inputs_config, inputs_data);
    // 清空之前的输入
    inputs.value = [];
    userInputsToShow.value = [];
    rawdata.value = [];

    inputs_config.forEach((input) => {
        // 如果是 raw_data，直接赋值
        if (input.mode === 'raw_data') {
            if (inputs_data && inputs_data[input.type]) {
                inputs.value.push({
                    name: input.name,
                    type: input.type,
                    value: inputs_data[input.type],
                    description: input.description
                });
                rawdata.value.push(inputs_data[input.type]);
            }
        }
        // 如果是 user_input，添加到界面展示列表
        else if (input.mode === 'user_input') {
            inputs.value.push({
                name: input.name,
                type: input.type,
                label: input.name,
                value: '',
                description: input.description
            });
            userInputsToShow.value.push(inputs.value[inputs.value.length - 1]);
        }
    });
};

// 获取输入参数
const getInputs = () => {
    const result = {};
    inputs.value.forEach((input) => {
        result[input.name] = input.value;
    });
    // console.log('All Inputs:', result);
    return result;
};

// 初始化时解析配置文件
onMounted(() => { });

defineExpose({ setInputs, getInputs });
</script>

<style scoped>
.input-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
</style>